<template>
  <!--计分流水-->
  <view>
    <up-popup
        :show="show"
        :round="10"
        mode="right"
        :closeOnClickOverlay="true"
        @close="close"
        @open="open">
      <view class="score-history-page">
        <!-- 流水记录列表 -->
        <view class="score-history-list" v-if="records.length>0">
          <view class="score-history-item" v-for="(item, index) in records" :key="index">
            <!-- 姓名和时间横向排列 -->
            <view class="user-info-time">
              <view class="user-info">
                <image :src="proxy.$tool.getResources(item.actionUserAvatar)" class="user-avatar" mode="aspectFill"></image>
                <text class="user-name">{{ item.actionUserName }}</text>
              </view>
              <view class="score-time">
                <text>{{ item.createDate }}</text>
              </view>
            </view>

            <!-- 描述信息在下一排 -->
            <view class="score-description" v-html="item.desc"></view>
          </view>
        </view >
        <up-empty
            v-else
            mode="list">
        </up-empty>
        <!--   留白   -->
        <view style="height: 100px"></view>
      </view>



    </up-popup>
  </view>
</template>

<script setup>
import {ref, defineProps, getCurrentInstance, defineEmits} from 'vue';
import {useStore} from "vuex";

const {proxy} = getCurrentInstance();
const store = useStore();
// 定义接收的参数
const props = defineProps({
  //是否关闭底部的导航
  isCloseBar: {
    type: Boolean,
    required: false, // 表示必须传递
    default: true,    //默认关闭
  },
});

const show = ref(false);

//定义房间id
const roomId = ref(null);

// 打开弹窗并传入 item
const open = (id) => {
  if(!id){
    return;
  }
  show.value = true;
  roomId.value = id;
  if (props.isCloseBar) {
    uni.hideTabBar();
  }
  //查询数据
  findRecordPage();

}

// 关闭弹窗
const close = () => {
  show.value = false;
  if (props.isCloseBar) {
    uni.showTabBar();
  }
}


//定义流水记录
const records = ref([]);

/**
 * 分页查询计分记录
 */
const findRecordPage = () => {
  proxy.$request.get(`/bus-room-record/findRoomRecord`, {
    roomId: roomId.value
  }).then(res => {
    records.value = res;
  })
}


defineExpose({
  open
})
</script>

<style lang="scss">

// 页面整体样式
.score-history-page {
  padding: 20px;
  background-color: #f8f8f8;
  max-width: 40vh;
  height: 100vh;
  overflow-y: auto;
  // 页面标题样式
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  // 流水记录列表样式
  .score-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    // 每条流水记录的样式
    .score-history-item {
      display: flex;
      flex-direction: column; // 整体为垂直布局
      padding: 10px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      // 姓名和时间横向排列
      .user-info-time {
        display: flex;
        align-items: center; // 使头像、姓名、时间垂直居中
        justify-content: space-between; // 姓名和时间两者两端排列
        margin-bottom: 5px; // 姓名和时间之间有间距

        // 用户信息：头像 + 姓名
        .user-info {
          display: flex;
          align-items: center;
        }

        .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .user-name {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    // 时间显示样式
    .score-time {
      font-size: 12px;
      color: #999;
      font-style: italic; // 时间使用斜体
    }

    // 描述信息的样式
    .score-description {
      font-size: 14px;
      color: #333;
      margin-top: 5px;
      line-height: 1.4; // 增加行高，使文本更加清晰
      word-wrap: break-word; /* 允许长单词或内容自动换行 */
    }

  }


}

</style>
